<template>
	<div id="VoteActivity">
		<div class="title-bar" :style="note">
			<div class="title">
				<img src="../assets/images/home/active_title_home.png" alt="" style="width: 100%;height: 100%;padding: 0 0.97rem;" />
				<div class="count">
					<count-down :currentTime="Number(cur_time)" :startTime="Number(new Date(details.vote_starttime).getTime() / 1000)" :endTime="Number(new Date(details.vote_endtime).getTime() / 1000)" :tipText="'距开始'" :tipTextEnd="'距活动结束仅剩'" :endText="'已结束'" :dayTxt="'天'" :hourTxt="'时'" :minutesTxt="'分'" :secondsTxt="'秒'">
					</count-down>
				</div>
			</div>
		</div>
		<div class="prize-list">
			<router-link :to="'/EnrollOffice/vote_id/' + details.vote_id">
				<button>立即报名</button>
			</router-link>
			<div class="auction">
				<ul>
					<li>
						<img src="../assets/images/home/active_prize_one.png" alt="" />
						<span>iphonex</span>
					</li>
					<li>
						<img src="../assets/images/home/active_prize_two.png" alt="" />
						<span>天然和田玉佩</span>
					</li>
					<li>
						<img src="../assets/images/home/active_prize_three.png" alt="" />
						<span>星月菩提</span>
					</li>
					<li>
						<img src="../assets/images/home/active_prize_four.png" alt="" />
						<span>红玛瑙</span>
					</li>
				</ul>
			</div>
			<div class="price-box">
				<card>
					<div slot="content" class="card-price-flex">
						<div class="vux-1px-r">
							<span>{{details.item_count}}</span>
							<p>参赛作品</p>
						</div>
						<div class="vux-1px-r">
							<span>{{details.ticket_count * multiple}}</span>
							<p>累计票数</p>
						</div>
						<div>
							<span>{{details.vote_vcount}}</span>
							<p>总访问量</p>
						</div>
					</div>
				</card>
			</div>
		</div>
		<div class="auction-list">

			<div class="search">
				<form action="" @submit.prevent="searchList" class="form">
					<img src="../assets/images/home/icon_search_bg.png" alt="" />
					<input v-model="search_keyword" type="search" placeholder="请输入藏品编号或者藏品名称" />
				</form>
			</div>
			<div class="tab-wrap">
				<tab :line-width="2" active-color='#fff' custom-bar-width="40px">
					<tab-item class="vux-center" v-for="item in tablist" :selected="item.name === '默认排序'" @on-item-click="getVoteItemList(item.type,1)" :key="item.type">{{item.name}}</tab-item>
				</tab>
				<div class="contentWrap">
					<ul>
						<li v-for="item in itemList">
							<router-link :to="'VoteDetail/item_id/' + item.item_id">
								<div class="image">
									<span class="ticket-num">{{item.item_id}}</span>
									<i class="pm-icon active_left_ticket"></i>
									<img :src="item.item_img + '?imageView2/1/w/346/h/426/q/75|imageslim'" alt="" />
								</div>
								<div class="info">
									<p class="name">{{item.item_title}}</p>
									<p class="number">
										<i class="pm-icon icon-fire"></i>
										<span>{{item.ticket_count * multiple}}</span>
										<b>投票</b>
									</p>
								</div>
							</router-link>
						</li>
					</ul>
				</div>
				<div class="dot">
					<ul>
						<li @click="prevOrNext(-1)" v-if="pages > 1">
							< </li>
								<li v-for="(item,index) in pages" @click="turnPage(item)" :key="index" :class="{actived: item === currentPage}">{{item}}</li>
								<li @click="prevOrNext(1)" v-if="pages > 1"> > </li>
					</ul>
				</div>
			</div>
		</div>
		<div class="wave">
			<img src="../assets/images/home/active_wave.png" alt="" />
		</div>
		<div class="intro">
			<p>河南省民间文物艺术品商会鉴定工作委员会，在洛阳、新乡等地设办事处。2013年根据河南省高级人民法院相关文件要求，成立河南省古玩行业社会法庭。</p>
			<p> 河南省民间文物艺术品商会鉴定工作委员会，拥有权威行业专家20余人，为藏家提供权威鉴定服务，鉴定意见更专业、更严谨，更实际，鉴定结果真实无虚，贴合市场估价，让藏家更了解自己的藏品，让藏友更放心！</p>
			<p> 河南民间文物艺术品商会在自身壮大的同时，实践着“以商扬古，以古促商”的办会理念。多次主办和协办了各类大型主题活动：CCTV《鉴宝》走进河南、中国（郑州）古玩艺术品博览会、中国古玩赛宝大会等。</p>
		</div>

		<div class="bottom">
			<img src="../assets/images/home/cert_qrcode.jpg" alt="" />
			<div class="unit">
				<p><span>主办单位</span><b>郑州宋唐电子商务有限公司</b></p>
				<p><span>鉴宝机构</span><b>河南民间文物艺术品商会鉴定委员会 </b></p>
			</div>
			<p class="end">本活动最终解释权归好文玩拍卖平台所有</p>
		</div>
		<alert v-model="show2" :title="title1" :content="title2" hide-on-blur></alert>
		<toast v-model="success" type="text" width="5rem">{{msg}}</toast>
		<bottom></bottom>
	</div>
</template>

<script>
	import CountDown from 'vue2-countdown';
	import bottom from './ActiveFooter'
	import { Card, Tab, TabItem, Tabbar, TabbarItem, Toast, Alert } from 'vux';
	import wx from 'weixin-js-sdk';
	export default {
		data() {
			return {
				itemList: [],
				success: false,
				multiple: '10',
				msg: '',
				title1: '',
				title2: '',
				show2: false,
				note: {
					backgroundImage: "url(" + require("../assets/images/home/active_hd_bg.png") + ")",
					backgroundRepeat: "no-repeat",
					backgroundSize: "100% 100%",
				},
				currentPage: '1',
				search_keyword: '',
				starttime: '',
				cur_time: '',
				endtime: '',
				totalPages: '',
				details: '',
				vote_id: '1',
				shareUrl: '',
				globals: '1',
				voteUrl: '',
				tablist: [{
						name: '默认排序',
						type: '1'
					},
					{
						name: '最新参与',
						type: '2'
					},
					{
						name: '投票排行',
						type: '3'
					},
				],
			}
		},
		components: {
			CountDown,
			Card,
			Tab,
			TabItem,
			Tabbar,
			TabbarItem,
			bottom,
			Toast,
			Alert
		},
		mounted() {
			this.getWXShare();
			this.getVoteItemList(1, 1);
			this.getVoteDetail();
		},
		methods: {
			getVoteItemList: function(index, pages) {
				this.globals = index;
				if(this.globals == 3) {
					this.voteUrl = '/los/api/vote/item_list.json?vote_id=' + this.vote_id + '&sort=item_rank&order=asc' + '&page=' + pages
				} else if(this.globals == 2) {
					this.voteUrl = '/los/api/vote/item_list.json?vote_id=' + this.vote_id + '&sort=item_id' + '&page=' + pages

				} else {
					this.voteUrl = '/los/api/vote/item_list.json?vote_id=' + this.vote_id + '&page=' + pages
				}
				this.$http({
					method: 'GET',
					url: this.voteUrl,
				}).then((result) => {
					this.itemList = result.data.item_list;
					this.totalPages = result.data.page_count;
				}).catch((err) => {

				})
			},
			getVoteDetail: function() {
				this.$http({
					method: 'GET',
					url: '/los/api/vote/details.json?vote_id=' + this.vote_id
				}).then((result) => {
					if(result.data.code == 1) {
						this.cur_time = result.data.cur_time;
						this.details = result.data.data;
					}
				}).catch((err) => {

				})
			},
			//搜索数据
			searchList: function() {
				this.$http({
					method: 'GET',
					url: '/los/api/vote/item_list.json?vote_id=' + this.vote_id + '&search_keyword=' + this.search_keyword,
					data: ''
				}).then((result) => {
					this.itemList = result.data.item_list;
				}).catch((err) => {

				})

			},
			turnPage(n) {
				if(n === this.currentPage) return
				if(typeof n === 'string') return
				this.currentPage = n
				this.getVoteItemList(this.globals, n);
			},
			prevOrNext(n) {
				this.currentPage += n
				this.currentPage < 1 ? this.currentPage = 1 : this.currentPage > this.totalPages ? this.currentPage = this.totalPages : null
				console.log(this.currentPage);
				this.getVoteItemList(this.globals, this.currentPage);
			},
			getWXShare: function() {
				let _this = this;
				let urls = window.location.href;
				var ua = navigator.userAgent.toLowerCase();
				if(/iphone|ipad|ipod/.test(ua)) {
					if(urls.indexOf("?") != -1) {
						this.shareUrl = window.location.href;
					} else {
						this.shareUrl = 'http://pm.haowenwan.com/dist/#/';
					}
				} else if(/android/.test(ua)) {
					this.shareUrl = urls;
				}
				var params = {
					url: this.shareUrl,
				}
				this.$http({
					method: 'POST',
					url: '/los/api/oauth/script',
					data: params,
				}).then((result) => {
					if(result) {
						wx.config({
							debug: result.data.debug,
							appId: result.data.appId,
							timestamp: result.data.timestamp,
							nonceStr: result.data.nonceStr,
							signature: result.data.signature,
							jsApiList: result.data.jsApiList,
						});
						wx.ready(function() {
							wx.onMenuShareAppMessage({
								title: '2018河南首届“公益鉴宝”藏品入围评选活动', // 分享标题
								desc: '参加“公益鉴宝”藏品入围评选，还能赢取iPhoneX，真是太厉害了！', // 分享描述
								link: urls, //分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
								imgUrl: 'http://pm.haowenwan.com/public/static/images/item_logo.jpg', // 分享图标
								type: 'link', // 分享类型,music、video或link，不填默认为link
								dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
								success: function(res) {
									_this.shareCallback('ShareAppMessage', urls, _this.vote_id);
								},
								cancel: function(err) {
									// 用户取消分享后执行的回调函数
								}
							});
							//分享朋友圈
							wx.onMenuShareTimeline({
								title: '我正在参加“公益鉴宝”评选，帮忙投票赢取iphoneX！', // 分享标题
								link: this.share_url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
								imgUrl: 'http://pm.haowenwan.com/public/static/images/item_logo.jpg', // 分享图标
								success: function() {
									_this.shareCallback('ShareTimeline', urls, _this.vote_id);
								},
							});
							wx.error(function(res) {

							});
						})
					} else {
						alert('获取信息失败 请重新尝试');
					}
				}).catch((err) => {
					console.log(err);
				})
			},
			shareCallback: function(share_method, share_url, vote_id) {
				var params = {
					share_url: share_url,
					share_method: share_method,
					vote_id: vote_id
				}
				this.$http({
					method: 'POST',
					url: '/los/api/vote/share.json',
					data: params
				}).then((result) => {

				}).catch((err) => {

				});
			},
			back: function() {
				window.history.go(-1);
			},
		},
		computed: {
			pages() {
				const c = this.currentPage
				const t = this.totalPages
				if(c <= 5) {
					return t //第一种情况
				} else if(c >= t - 3) {
					return [1, t - 3, t - 2, t - 1, t] //第二种情况
				} else {
					//1, '...', c - 3, c - 2, c - 1, c, c + 1, c + 2, c + 3, '...', t
					return ['...', c - 1, c, c + 1, '...'] //第三种情况
				}
			}
		},
		//点击投票
		//			voteTicket: function(vote_id, item_id) {
		//				var params = {
		//					item_id: item_id,
		//					vote_id: vote_id
		//				}
		//				this.$http({
		//					method: 'POST',
		//					url: '/los/api/vote/ticket.json',
		//					data: params
		//				}).then((result) => {
		//					if(result.data.code == 1) {
		//						this.show2 = !this.show2;
		//						this.title1 = '谢谢 您已投票成功';
		//						this.title2 = '点击右下角可参与抽奖哦！'
		//						this.$nextTick(() => {
		//							this.getVoteItemList();
		//						})
		//					} else {
		//						this.show2 = !this.show2;
		//						this.title1 = '今日已投票';
		//						this.title2 = '转发链接可获取额外的投票机会哦！'
		//					}
		//				}).catch((err) => {
		//
		//				})
		//			},
	}
</script>

<style scoped>
	#VoteActivity {
		background: #f7fcfb;
	}
	
	.header {
		background: #fff;
	}
	
	.actived {
		width: 0.61rem!important;
		height: 0.61rem!important;
		background: #fff;
	}
	
	.title-bar {
		/*background: url(../assets/images/home/active_hd_bg.png) center center no-repeat;*/
		/*background-size: 100%;*/
	}
	
	.title-bar .title {
		width: 100%;
		text-align: center;
		padding-top: 5.2rem;
	}
	
	.title-bar .title h2 {
		font-size: 0.48rem;
		color: #9f5757;
	}
	
	.title-bar .title .name {
		color: #864f4f;
		font-size: 0.62rem;
		margin-top: 0.32rem;
	}
	
	.title-bar .title .count {
		height: 1.2rem;
		width: 8.37rem;
		margin: 0.26rem auto 0;
	}
	
	.title-bar .title .count {
		color: #fff;
	}
	
	.prize-list {
		width: 100%;
		padding-bottom: 0.64rem;
	}
	
	.prize-list button {
		width: 3.28rem;
		height: 1.01rem;
		background: #d87a7a;
		border: none;
		margin: 0 auto;
		margin: 0.45rem 3.36rem 0;
		color: #fff;
		font-size: 0.4rem;
		border-radius: 0.1rem;
	}
	
	.prize-list .auction ul {
		margin-top: 0.37rem;
		overflow: hidden;
		padding: 0 0.4rem;
	}
	
	.prize-list .auction ul li {
		float: left;
		width: 2.05rem;
		overflow: hidden;
		margin-right: 0.32rem;
	}
	
	.prize-list .auction ul li:last-child {
		margin-right: 0;
	}
	
	.prize-list .auction ul li img {
		width: 2.05rem;
		height: 2.05rem;
		border-radius: 50%;
	}
	
	.prize-list .auction ul li span {
		color: #ad8888;
		font-size: 0.32rem;
		display: block;
		margin-top: 0.17rem;
		text-align: center;
	}
	
	.price-box {
		position: relative;
		padding: 0 0.4rem;
		margin-top: 0.53rem;
	}
	
	.price-box .weui-panel {
		background: none;
	}
	
	.price-box .weui-panel:before,
	.price-box .weui-panel:after {
		border: none;
	}
	
	.price-box .card-price-flex {
		display: flex;
	}
	
	.price-box .card-price-flex>div {
		flex: 1;
		text-align: center;
		font-size: 0.32rem;
		color: #aaa;
	}
	
	.price-box .card-price-flex span {
		color: #e71d1d;
		font-size: 0.45rem;
	}
	
	.price-box .card-price-flex p {
		padding-top: 0.13rem;
		color: #c18080;
		font-size: 0.32rem;
	}
	
	.price-box .card-price-flex .vux-1px-r:after {
		top: 0.21rem;
		height: 0.58rem;
		border-color: #ffd2d2!important;
	}
	
	.auction-list {
		background: linear-gradient(#efb7b3, #c26c6b);
	}
	
	.auction-list .search {
		margin: 0 0.26rem;
		overflow: hidden;
		height: 1.33rem;
		border-radius: 0.1rem;
		background: #fff;
	}
	
	.auction-list .search .form {
		width: 100%;
		height: 100%;
	}
	
	.auction-list .search img {
		float: left;
		margin: 0.46rem;
		width: 0.37rem;
		height: 0.37rem;
	}
	
	.auction-list .search input {
		float: left;
		height: 100%;
		line-height: 100%;
		width: 86%;
	}
	
	.wave {
		width: 100%;
		height: 100%;
		margin-top: -0.37rem;
	}
	
	.wave img {
		width: 100%;
		height: 100%;
	}
	
	input::-webkit-input-placeholder {
		color: #c76d6b;
		font-size: 0.37rem;
	}
	
	.tab-wrap {
		/*width: 6.66rem;
		margin: 0 auto;*/
	}
	
	.tab-wrap .vux-tab {
		background: none;
	}
	
	.tab-wrap .vux-tab .vux-tab-item {
		font-size: 0.4rem;
		background: none;
		position: relative;
		color: #fff;
		opacity: .5;
	}
	
	.tab-wrap .vux-tab .vux-tab-item:after {
		content: " ";
		position: absolute;
		left: 0;
		bottom: 0;
		width: 200%;
		height: 1px;
		border-bottom: 1px solid #f3f3f3;
		transform-origin: 0 0;
		transform: scaleX(0.5);
		opacity: .3;
	}
	
	.vux-tab .vux-tab-item.vux-tab-selected {
		color: #fff!important;
		opacity: 1;
	}
	
	.contentWrap ul {
		overflow: hidden;
		padding-top: 0.4rem;
		margin: 0 0.26rem;
	}
	
	.contentWrap ul li {
		float: left;
		position: relative;
		margin-right: 0.26rem;
		margin-bottom: 0.24rem;
		width: 4.61rem;
		overflow: hidden;
	}
	
	.contentWrap ul li:nth-child(2n) {
		margin-right: 0;
	}
	
	.contentWrap ul li .image {
		width: 4.61rem;
		height: 5.68rem;
	}
	
	.contentWrap ul li .image .pm-icon {
		position: absolute;
		width: 1.3rem;
		height: 1.3rem;
		z-index: 111;
	}
	
	.contentWrap ul li .number .icon-fire {
		float: left;
		width: 0.28rem;
		height: 0.37rem;
		margin: 0.13rem 0.13rem 0 0;
	}
	
	.contentWrap ul li img {
		width: 100%;
		height: 100%;
		border-top-left-radius: 0.1rem;
		border-top-right-radius: 0.1rem;
	}
	
	.contentWrap ul li .ticket-num {
		position: absolute;
		font-size: 0.37rem;
		color: #fff;
		z-index: 222;
		left: 0.18rem;
		top: 0.18rem;
		transform: rotate(-45deg);
	}
	
	.contentWrap ul li .info {
		overflow: hidden;
		padding: 0.34rem 0.18rem 0.37rem;
		background: #fff;
		border-bottom-left-radius: 0.1rem;
		border-bottom-right-radius: 0.1rem;
	}
	
	.contentWrap ul li .info .name {
		font-size: 0.4rem;
		color: #333;
		margin-bottom: 0.34rem;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.contentWrap ul li .info .number {
		overflow: hidden;
	}
	/*.contentWrap ul li .info .number i {
		float: left;
		display: inline-block;
		margin-top: 0.16rem;
		margin-right: 0.1rem;
	}*/
	
	.contentWrap ul li .info .number span {
		float: left;
		font-size: 0.37rem;
		color: #d34f4f;
		display: inline-block;
		height: 0.72rem;
		line-height: 0.72rem;
	}
	
	.contentWrap ul li .info .number b {
		float: right;
		font-weight: normal;
		width: 1.86rem;
		height: 0.72rem;
		line-height: 0.72rem;
		background: #c76d6b;
		border-radius: 0.36rem;
		text-align: center;
		color: #fff;
		font-size: 0.37rem;
	}
	
	.tab-wrap .dot {
		padding: 0.58rem 0 0.4rem;
		margin: 0 0.26rem;
	}
	
	.tab-wrap .dot ul {
		overflow: hidden;
		padding: 0 2rem;
		width: 100%;
		margin: 0 auto;
	}
	
	.tab-wrap .dot ul li {
		float: left;
		width: 0.56rem;
		height: 0.56rem;
		line-height: 0.56rem;
		text-align: center;
		background: #fff;
		border-radius: 50%;
		color: #c7756d;
		margin-right: 0.21rem;
		padding-top: 0.04rem;
	}
	
	.intro {
		padding: 0 0.26rem;
		background: #fff;
		font-size: 0.37rem;
		color: #333;
	}
	
	.intro p {
		text-indent: 2em;
	}
	
	.bottom {
		overflow: hidden;
		padding: 0.72rem 0 1.6rem;
		background: #fff;
	}
	
	.bottom img {
		float: left;
		width: 1.68rem;
		height: 1.68rem;
		margin: 0 0.32rem;
	}
	
	.bottom .unit {
		float: left;
		width: 72.5%;
	}
	
	.bottom .unit p span {
		font-size: 0.34rem;
		color: #333;
		margin-right: 0.18rem;
	}
	
	.bottom .unit p b {
		font-size: 0.34rem;
		color: #333;
		font-weight: normal;
	}
	
	.bottom .unit p .last {
		display: block;
		margin-left: 1.54rem;
	}
	
	.bottom .end {
		margin-top: 0.56rem;
		font-size: 0.26rem;
		color: #777;
		text-align: center;
		width: 100%;
		float: left;
	}
	
	#foot {
		position: fixed;
		z-index: 500;
		width: 100%;
		bottom: 0;
	}
</style>